<template>
  <div id="myOrder">
    <FunctionalTitle  title="我的订单" :border=false :fixed=true :left-arrow=true @click-left="handleToBack"/>
    <!-- <van-nav-bar title="我的订单"
                 :border=false
                 :fixed="true"
                 @click-left="handleToBack"
                 left-arrow
                 style="height: 44px" /> -->
    <van-tabs v-model="active"
              animated
              swipeable
              sticky
              :border="false"
              :offset-top="47"
              ref="tabs"
              type="line"
              color="#28BE57"
              title-active-color="#28BE57"
              animated:yes>
      <van-tab v-for="(item, index) in itemsTitle" :key="index">
        <div slot="title"><span>{{item}}</span></div>
        <OrderType :orderTypeDataArray="typeArray" />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import FunctionalTitle from '@/components/FunctionalTitle'
import OrderType from './myOrderChildren/OrderType'
export default {
  name: 'MyOrder',
  data () {
    return {
      typeArray: [],
      // 路由传递过来的数据 active
      active: this.$route.params.active,
      itemsTitle: ['全部', '待支付', '待收货', '待评价']
    }
  },
  components: {
    OrderType,
    FunctionalTitle
  },
  methods: {
    handleToBack () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
#myOrder {
  @include setAllcover(9999);
  background-color: $bg-color-page;
  .van-icon {
    color: #dedede;
  }
}
</style>

